<div class="motivationalZ">
	<div class="motivational">
		<div class="motivationalTop"><img src="../../image/my/hb.png" alt="" class="motivationalTu"></div>
		<div class="motivationalBot">
			<div class="motivationalBotL">
				<div class="motivationalBotLT">
					<div class="motivationalBotLTL"><img src="../../image/my/tx.png" alt=""></div>
					<div class="motivationalBotLTR">
						<p class="motivationalP"><span class="motivationalN">张三</span><span class="motivationalZ">销售</span></p>
						<p class="motivationalP">新华杨科技</p>
					</div>
				</div>
				<div class="motivationalBotLB">手机：1866666666</div>
			</div>
			<div class="motivationalBotR">
				<div class="motivationalBotRImg"><img src="../../image/my/ty.png" alt=""></div>
				<p class="motivationalP2">长按识别二维码</p>
			</div>
		</div>
	</div>
	<div class="motivationalbtn">
		<div class="motivationalbtnH">换一换</div>
		<div class="motivationalbtnB">保存海报</div>

	</div>
	<div class="motivationalImages">长按图片分享</div>
</div>
<script>
	var motivationalNum = 0;
	var motivationalArr = ["../../image/my/hb.png","../../image/my/tp1.png","../../image/my/tp2.png","../../image/my/tp3.png","../../image/my/tp4.png","../../image/my/tp5.png"]
	var motivationalbtnH = document.querySelector(".motivationalbtnH")
	var motivationalTu = document.querySelector(".motivationalTu")
	var motivationalbtnB = document.querySelector(".motivationalbtnB")



	motivationalbtnH.onclick = function(){
		motivationalNum++
		if(motivationalNum>5){
			motivationalNum = 0;
		}
		motivationalArr.forEach(function(dom,index){
			if(index == motivationalNum){
				motivationalTu.src = dom;
			}
		})
	}
	motivationalbtnB.onclick = function(){
		jQuery(document).ready(function(){

	    	var dom=$(".motivational"); //你要转变的dom
		    var width = dom.width();
		    var height = dom.height();
		    var type = "png";
		    var scaleBy = 3;  //缩放比例
		    var canvas = document.createElement('canvas');
		    var rect = dom.get(0).getBoundingClientRect(); 
		    canvas.width = width * scaleBy;
		    canvas.height = height * scaleBy;  //35是我处理完后发现短了一点，具体为什么不清楚,如果你也少的话，根据自己的项目调吧
		    canvas.style.width = width * scaleBy + 'px';
		    canvas.style.height = height * scaleBy + 'px';
		    var context = canvas.getContext('2d');
		    context.scale(scaleBy, scaleBy);
		    context.translate(-rect.left,-rect.top);
		    // 【重要】关闭抗锯齿
	        context.mozImageSmoothingEnabled = false;
	        context.webkitImageSmoothingEnabled = false;
	        context.msImageSmoothingEnabled = false;
	        context.imageSmoothingEnabled = false;

	        var img = new Image();
	        console.log(img)
	        //此处图像默认放置占位，必须真实有效存在
	        img.src='https://business.17jxyx.com/AI_radar/image/my/images.jpg';
	        img.onload = function(){
	            var elem = jQuery('.motivational');
	            html2canvas([elem.get(0)], {
	            	canvas:canvas,
	                onrendered: function (canvas) {
	                    var image = canvas.toDataURL("image/png");
	                    var pHtml = "<img src='"+image+"' style='width:100%;height:100%'>";
	                    $('.motivational').html("");
	                    jQuery(".motivational").html(pHtml);
	                    // jQuery("#content").attr("style","padding-top:40px");
	                    // $("#content").append(Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type));//这是放大了很3倍的图片
	        			// $("#content img").css("width",width+"px").css("height",height+"px");//
	                }
	            });
	        }
		});
		setTimeout(function(){
			$(".motivationalbtn").css("display","none")
			$(".motivationalImages").css("display","block")

		},1000)
	}
	// var motivationalNum = Math.random()
	// console.log(motivationalNum)
	
</script>